
<template>
  <div class="containerWrap">
    <div class="headWrap">
      <div class="content_title">公司管理</div>
      <div  class="search">
        <el-form :inline="true"  class="demo-form-inline searchBox">
          <el-form-item label="关键字">
            <el-input
              placeholder="关键词搜索"
              icon="search"
              :on-icon-click="searchByWord">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div>
      <el-tabs type="card" v-model="activeName" @click="handleClick">
        <el-tab-pane label="开通商户" name="0"> <ToOpenMerchant v-if="activeName==='0'"></ToOpenMerchant></el-tab-pane>
        <el-tab-pane label="已开通商户" name="1"><OpenedMerchantList v-if="activeName==='1'"></OpenedMerchantList></el-tab-pane>
        <el-tab-pane label="待开通商户" name="2"><WaitingOpendMerchantList v-if="activeName==='2'"></WaitingOpendMerchantList></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
  import OpenedMerchantList from './openedMerchantList.vue';
  import WaitingOpendMerchantList from './waitingOpendMerchantList.vue';
  import ToOpenMerchant from './toOpenMerchant.vue';
  export default {
    data () {
      return {
        tableData: [{'id': 1}],
        activeName: '0'
      };
    },
    methods: {
      // 关键字搜索
      searchByWord () {
        alert('关键字搜索');
      },
      // 修改
      modify () {
        alert('修改');
      },
      // 冻结
      freeze () {
        alert('冻结');
      },
      // 冻结
      CMS () {
        alert('CMS');
      },
      // 采集
      collect () {
        alert('采集');
      },
      // 切换tab页签
      handleClick (tab, event) {
        this.activeName = tab.name;
        console.log(this.activeName);
        alert('切换Tab页签');
      }
    },
    components: {OpenedMerchantList, WaitingOpendMerchantList, ToOpenMerchant},
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
